<script setup>
import "element-plus/theme-chalk/el-message.css";
import { userLogin } from "./composables/login.js";
import { uploadUtils } from "@/composables/uploadUtils.js";

const {
  loginForm,
  registerForm,
  loginRules,
  registerRules,
  loginFormRef,
  registerFormRef,
  dialogFormVisible,
  tableForm,
  doLogin,
  uploadImg,
} = userLogin();

const {
  imageUrl,
  dialogVisible,
  handleChange,
  beforeAvatarUpload,
  beforeAvatarRemove,
  handlePictureCardPreview
} = uploadUtils();


</script>

<template>
  <img class="login-img" src="@/assets/images/login-bg.jpg" alt=""/>
  <div class="login">
    <el-tabs type="border-card">
      <el-tab-pane label="登录">
        <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            label-position="right"
            label-width="100px"
            style="max-width: 460px"
            class="loginForm"
        >
          <el-form-item prop="phone" label="手机号码：">
            <el-input class="login-input" v-model="loginForm.phone"/>
          </el-form-item>
          <el-form-item prop="password" label="密码：">
            <el-input class="login-input" type="password" v-model="loginForm.password"/>
          </el-form-item>
          <el-button
              type="primary"
              class="loginBtn"
              @click="doLogin('login')"
          >
            登录
          </el-button>
          <a href="javascript:;" @click="dialogFormVisible=true">修改密码</a>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="注册">
        <el-form
            ref="registerFormRef"
            :model="registerForm"
            :rules="registerRules"
            label-position="right"
            label-width="100px"
            style="max-width: 460px"
            class="loginForm"
        >
          <el-form-item prop="name" label="用户名：">
            <el-input class="login-input" type="name" v-model="registerForm.name"/>
          </el-form-item>
          <el-form-item prop="phone" label="手机号码：">
            <el-input class="login-input" v-model="registerForm.phone"/>
          </el-form-item>
          <el-form-item prop="sex" label="性别：">
            <el-radio-group v-model="registerForm.sex" class="ml-4">
              <el-radio label="男" size="large">男</el-radio>
              <el-radio label="女" size="large">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="password" label="密码：">
            <el-input class="login-input" type="password" v-model="registerForm.password"/>
          </el-form-item>
          <el-form-item prop="confirmPassword" label="确认密码：">
            <el-input class="login-input" type="password" v-model="registerForm.confirmPassword"/>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
                class="avatar-uploader"
                action="none"
                list-type="picture-card"
                multiple
                :limit="1"
                :show-file-list="true"
                :http-request="uploadImg"
                :on-change="handleChange"
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload"
                :before-remove="beforeAvatarRemove"
            >
              <el-icon class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="imageUrl" alt=""/>
            </el-dialog>
          </el-form-item>
          <el-button
              type="primary"
              class="loginBtn"
              @click="doLogin('register')"
          >
            注册
          </el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div class="login-dialog">
    <el-dialog v-model="dialogFormVisible" title="修改密码">
      <el-form :model="tableForm">
        <el-form-item label="请输入手机号：" :label-width="150">
          <el-input class="login-input" v-model="tableForm.phone" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="请输入密码：" :label-width="150">
          <el-input class="login-input" v-model="tableForm.password" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.login-img {
  width: 100%;
  height: 1024px;
}

.login {
  position: absolute;
  left: 1000px;
  top: 200px;
  width: 400px;

  a {
    position: absolute;
    left: 320px;
    top: 120px;
  }
}

.loginBtn {
  width: 100px;
  text-align: center;
}

.loginForm {
  text-align: center;
}

.login-input {
  width: 250px;
}
</style>